{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[this doc on github](https://github.com/dotnet/interactive/tree/main/samples/notebooks/powershell)\n",
    "\n",
    "# Outputting HTML in a PowerShell notebook <img src=\"https://raw.githubusercontent.com/PowerShell/PowerShell/master/assets/Powershell_black_64.png\" align=\"right\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The magic of the `Out-Display` cmdlet"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Displaying rich output"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you want to write out a `string` as HTML, you can use the `Out-Display` cmdlet:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    }
   },
   "outputs": [],
   "source": [
    "'<b style=\"color:blue\">Hello!</b>' | Out-Display"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Specifying a MIME type"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`Out-Display` also allows you to specify the MIME type which gives you the ability to:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    }
   },
   "outputs": [],
   "source": [
    "# Output JavaScript\n",
    "Out-Display \"alert('Hello!');\" -MimeType application/javascript\n",
    "\n",
    "# Output Markdown\n",
    "Out-Display \"**BOLD** _ITALICS_\" -MimeType text/markdown"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Specifying a custom MIME type\n",
    "\n",
    "If you want to use your own MIME type on one not defined in `-MimeType` you can use the `-CustomMimeType` parameter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    }
   },
   "outputs": [],
   "source": [
    "Invoke-WebRequest https://raw.githubusercontent.com/PowerShell/PowerShell/master/assets/avatar_128.svg |\n",
    "    Select-Object -ExpandProperty Content |\n",
    "    Out-Display -CustomMimeType 'image/svg+xml'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Magic Commands\n",
    "\n",
    "There are also several magic commands that can be used to output HTML in your .NET notebook.\n",
    "\n",
    "You can output HTML..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    }
   },
   "outputs": [],
   "source": [
    "#!html\n",
    "\n",
    "<b>Hello!</b>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "...or run JavaScript..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "javascript"
    }
   },
   "outputs": [],
   "source": [
    "#!javascript\n",
    "\n",
    "alert(\"hello\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "...or render Markdown."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    }
   },
   "outputs": [],
   "source": [
    "#!markdown\n",
    "\n",
    "Write a **list** ...\n",
    "* first\n",
    "* second\n",
    "\n",
    "...or a _table_...\n",
    "\n",
    "|Fruit    |Texture |\n",
    "|---------|--------|\n",
    "|apple    |smooth  |\n",
    "|durian   |bumpy   |"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".NET (PowerShell)",
   "language": "PowerShell",
   "name": ".net-powershell"
  },
  "language_info": {
   "file_extension": ".ps1",
   "mimetype": "text/x-powershell",
   "name": "PowerShell",
   "pygments_lexer": "powershell",
   "version": "7.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}